<template>
  <div id="auditComment">
    <el-card class="box-card" style="margin-left: 100px;margin-top:40px;width: 1000px;height: 520px">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!--审核评论选项卡-->
        <el-tab-pane label="审核评论" name="comment">
          <el-table
              :data="unAuditCommentList"
              style="width: 100%">
            <el-table-column
                prop=""
                label="查看评论人"
                width="200">
              <template slot-scope="scope">
                <el-link type="primary" @click="specificContent(scope.row.userId)">查看</el-link>
              </template>
            </el-table-column>
            <el-table-column
                prop="time"
                label="评论时间"
                width="200">
            </el-table-column>
            <el-table-column
                prop="content"
                label="评论内容"
                width="190">
            </el-table-column>
            <el-table-column
                prop="address"
                label="操作"
                width="250">
              <template slot-scope="scope">
                <el-button type="success" plain @click="passedTopic(scope.row.id,scope.row.userId)">通过</el-button>
                <el-button type="danger" plain @click="unPassedTopic(scope.row.id,scope.row.userId)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <!--分页组件-->
      <div class="block" v-show="showPagination" style="float:left;margin-left: 200px" >
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[3, 5]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-card>
    <!--题具体内容弹窗-->
    <el-dialog title="" :visible.sync="dialogFormVisible" style="width: 1000px" >
      <el-form ref="form" label-width="80px"style="margin-left: -30px">
        <el-form-item label="账号:">
          {{this.userInfo.username}}
        </el-form-item>
        <el-form-item label="昵称:">
          {{this.userInfo.nickName}}
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AuditorUserCenter-auditComment",
  data() {
    return{
      activeName:'',
      pageNo: 1, //当前页数
      pageSize: 3, //显示条数
      total: 0, //总条数
      showPagination: true, //分页栏是否显示
      unAuditCommentList:[{
        id:'',content:'',isCheck:'',time:'',userId:'',
      }],
      dialogFormVisible:false,//详细内容弹窗
      contentList:{
        title:'',content:'',answer:''
      },
      userInfo:{ icon:'', id:'', nickName:'', username:''}
    }
  },
  methods:{
    //加载页面执行的方法
    loadFun(){
      this.activeName='comment';
      this.getUnAuditorCommentList();
    },
    //分页相关
    handleSizeChange(val) {
      this.pageSize=val;
      this.pageNo=1;//当切换一页显示几个的时候，我们要把页码切换第一页
      this.getUnAuditorCommentList();
      //console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNo=val;
      this.getUnAuditorCommentList();
      //console.log(`当前页: ${val}`);
    },
    //获取未审核题目
    getUnAuditorCommentList(){
      this.$myAxios('/auditorUserCenter/getNoCheckCommentListJ','post',{
        pageNo:(this.pageNo - 1) * this.pageSize,
        pageSize:this.pageSize
      },resp=>{
        console.log(resp)
        this.unAuditCommentList=resp.data.data.commentList
        this.total=resp.data.data.total;
      })
    },
    //点击标题查看具体内容
    specificContent(id){
      this.dialogFormVisible=true;
      //根据userId去后台获取账号昵称头像等信息
      this.$myAxios('/auditorUserCenter/getThisUserInfo','get',{userId:id},resp=>{
        console.log(resp)
        this.userInfo=resp.data.data
      })
    },
    //通过按钮
    passedTopic(commentId,userId){
      this.$confirm('是否将该道题通过审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$myAxios('/auditorUserCenter/commentPassedJ','post',{
          id:commentId,
          userId:userId
        },resp=>{
          this.$message({
            type: 'success',
            message: '通过成功!'
          });
          this.getUnAuditorCommentList();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //未通过按钮
    unPassedTopic(topicId,userId){
      this.$confirm('是否删除当前评论?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$myAxios('/auditorUserCenter/commentUnPassedJ','post',{
          id:topicId,
          userId:userId
        },resp=>{
          this.$message({
            type: 'success',
            message: '设置成功'
          });
          this.getUnAuditorCommentList();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    }
  },
  created() {
    this.loadFun();
  }
}
</script>

<style scoped>

</style>